<template>
  <div style="padding: 10% 15%" class="addCard">
    <div>
      <p style="font-weight: 900; font-size: 20px">人员报卡查询</p>
      <el-input
        placeholder="请输入内容"
        v-model="query.card"
        class="input-with-select"
        style="width: 400px"
      >
        <el-button slot="append" type="primary" @click="getUserInfoByIdCard"
          >查 询</el-button
        >
      </el-input>
    </div>
    <div style="margin: 15px 0" v-show="isShow">
      <!-- <div class="box" @click="to_info('冠心病')">
        <el-row>
          <el-col :span="4">
            <i class="iconfont">&#xe600;</i>
          </el-col>
          <el-col :span="15">
            <p style="margin: 0; text-align: center; font-weight: 700">
              冠心病
            </p>
            <p style="margin: 0; text-align: center">[I21-I22]</p>
          </el-col>
          <el-col :span="5" style="text-align: center">
            <el-button type="text">立即填报</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="box" @click="to_info('脑卒中')">
        <el-row>
          <el-col :span="4">
            <i class="iconfont">&#xe600;</i>
          </el-col>
          <el-col :span="15">
            <p style="margin: 0; text-align: center; font-weight: 700">
              脑卒中
            </p>
            <p style="margin: 0; text-align: center">[I60、I61、I63、I64]</p>
          </el-col>
          <el-col :span="5" style="text-align: center">
            <el-button type="text">立即填报</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="box" @click="to_info('心脏性猝死')">
        <el-row>
          <el-col :span="4">
            <i class="iconfont">&#xe600;</i>
          </el-col>
          <el-col :span="15">
            <p style="margin: 0; text-align: center; font-weight: 700">
              心脏性猝死
            </p>
            <p style="margin: 0; text-align: center">[I46.1]</p>
          </el-col>
          <el-col :span="5" style="text-align: center">
            <el-button type="text">立即填报</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="box" @click="to_info('心绞痛')">
        <el-row>
          <el-col :span="4">
            <i class="iconfont">&#xe600;</i>
          </el-col>
          <el-col :span="15">
            <p style="margin: 0; text-align: center; font-weight: 700">
              心绞痛
            </p>
            <p style="margin: 0; text-align: center">[I20-I20.9]</p>
          </el-col>
          <el-col :span="5" style="text-align: center">
            <el-button type="text">立即填报</el-button>
          </el-col>
        </el-row>
      </div> -->
      <!-- <div class="box" @click="to_info('慢性呼吸系统疾病')">
        <el-row>
          <el-col :span="4">
            <i class="iconfont">&#xe61d;</i>
          </el-col>
          <el-col :span="15">
            <p
              style="
                margin: 0;
                text-align: center;
                margin-top: 10px;
                font-weight: 700;
              "
            >
              慢性呼吸系统疾病
            </p>
          </el-col>
          <el-col :span="5" style="text-align: center">
            <el-button type="text">立即填报</el-button>
          </el-col>
        </el-row>
      </div> -->
      <div class="box" @click="to_info('冠心病')">
        <el-row>
          <el-col :span="4">
            <i class="iconfont">&#xe600;</i>
          </el-col>
          <el-col :span="15">
            <p
              style="
                margin: 0;
                text-align: center;
                margin-top: 10px;
                font-weight: 700;
              "
            >
              冠心病
            </p>
          </el-col>
          <el-col :span="5" style="text-align: center">
            <el-button type="text">立即填报</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="box" @click="to_info('慢阻肺')">
        <el-row>
          <el-col :span="4">
            <i class="iconfont">&#xe600;</i>
          </el-col>
          <el-col :span="15">
            <p
              style="
                margin: 0;
                text-align: center;
                margin-top: 10px;
                font-weight: 700;
              "
            >
              慢阻肺
            </p>
          </el-col>
          <el-col :span="5" style="text-align: center">
            <el-button type="text">立即填报</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="box" @click="to_info('高血压')">
        <el-row>
          <el-col :span="4">
            <i class="iconfont">&#xe600;</i>
          </el-col>
          <el-col :span="15">
            <p
              style="
                margin: 0;
                text-align: center;
                margin-top: 10px;
                font-weight: 700;
              "
            >
              高血压
            </p>
          </el-col>
          <el-col :span="5" style="text-align: center">
            <el-button type="text">立即填报</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="box" @click="to_info('糖尿病')">
        <el-row>
          <el-col :span="4">
            <i class="iconfont">&#xe600;</i>
          </el-col>
          <el-col :span="15">
            <p
              style="
                margin: 0;
                text-align: center;
                margin-top: 10px;
                font-weight: 700;
              "
            >
              糖尿病
            </p>
          </el-col>
          <el-col :span="5" style="text-align: center">
            <el-button type="text">立即填报</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="box" @click="to_info('脑卒中')">
        <el-row>
          <el-col :span="4">
            <i class="iconfont">&#xe600;</i>
          </el-col>
          <el-col :span="15">
            <p
              style="
                margin: 0;
                text-align: center;
                margin-top: 10px;
                font-weight: 700;
              "
            >
              脑卒中
            </p>
          </el-col>
          <el-col :span="5" style="text-align: center">
            <el-button type="text">立即填报</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="box" @click="to_info('慢性肾脏病')">
        <el-row>
          <el-col :span="4">
            <i class="iconfont">&#xe600;</i>
          </el-col>
          <el-col :span="15">
            <p
              style="
                margin: 0;
                text-align: center;
                margin-top: 10px;
                font-weight: 700;
              "
            >
              慢性肾脏病
            </p>
          </el-col>
          <el-col :span="5" style="text-align: center">
            <el-button type="text">立即填报</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="box" @click="to_info('肿瘤')">
        <el-row>
          <el-col :span="4">
            <i class="iconfont">&#xe600;</i>
          </el-col>
          <el-col :span="15">
            <p
              style="
                margin: 0;
                text-align: center;
                margin-top: 10px;
                font-weight: 700;
              "
            >
              肿瘤
            </p>
          </el-col>
          <el-col :span="5" style="text-align: center">
            <el-button type="text">立即填报</el-button>
          </el-col>
        </el-row>
      </div>
      <div v-if="user_info" style="color: green">
        已查询到该人员信息，填写表单时已自动填充信息
      </div>
      <div v-if="!user_info" style="color: red">未查询到人员患者信息</div>
    </div>
    <el-empty
      description="请输入患者身份证号进行查询"
      v-show="!isShow"
    ></el-empty>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: {
        card: "",
      },
      isShow: false,
      user_info: {},
    };
  },
  mounted() {
    if (this.$route.query.idCard) {
      this.query.card = this.$route.query.idCard;
    }
  },
  methods: {
    to_info(val) {
      // if (val == "急性心肌梗死") {
      //   this.$router.push("/BKXT/bk_info/jxxjgs?name=" + val);
      // }
      // if (val == "脑卒中") {
      //   this.$router.push("/BKXT/bk_info/ncz?name=" + val);
      // }
      // if (val == "心脏性猝死") {
      //   this.$router.push("/BKXT/bk_info/xzxcs?name=" + val);
      // }
      // if (val == "心绞痛") {
      //   this.$router.push("/BKXT/bk_info/xjt?name=" + val);
      // }
      // if (val == "慢性呼吸系统疾病") {
      //   this.$router.push("/BKXT/bk_info/mxhxxtjb?name=" + val);
      // }
      if (val == "糖尿病") {
        this.$router.push(
          "/BKXT/bk_info/tnb?name=" + val + "&idCard=" + this.query.card
        );
      }
      if (val == "高血压") {
        this.$router.push(
          "/BKXT/bk_info/gxy?name=" + val + "&idCard=" + this.query.card
        );
      }
      if (val == "慢阻肺") {
        this.$router.push(
          "/BKXT/bk_info/mzf?name=" + val + "&idCard=" + this.query.card
        );
      }
      if (val == "脑卒中") {
        this.$router.push(
          "/BKXT/bk_info/ncz?name=" + val + "&idCard=" + this.query.card
        );
      }
      if (val == "冠心病") {
        this.$router.push(
          "/BKXT/bk_info/gxb?name=" + val + "&idCard=" + this.query.card
        );
      }
      if (val == "慢性肾脏病") {
        this.$router.push(
          "/BKXT/bk_info/mxsb?name=" + val + "&idCard=" + this.query.card
        );
      }
      if (val == "肿瘤") {
        this.$router.push(
          "/BKXT/bk_info/zl?name=" + val + "&idCard=" + this.query.card
        );
      }
    },
    getUserInfoByIdCard() {
      this.$post("/resident/getInfoByIdCard?idCard=" + this.query.card).then(
        (res) => {
          this.user_info = res.data;
          this.isShow = true;
        }
      );
    },
  },
};
</script>

<style  lang="scss" >
.addCard {
  .el-input-group__append,
  .el-input-group__prepend {
    background-color: rgb(0, 146, 254);
    color: #fff;
  }
  .box {
    display: inline-block;
    margin: 10px;
    margin-left: 0;
    margin-right: 20px;
    width: 25%;
    padding: 10px 15px;
    border: 1px solid #ccc;
    background-color: rgb(250, 250, 250);
    border-radius: 5px;
  }
}
</style>
